<template>
	<view>
		<view class="search">
			<u-search :placeholder="searchDefText" v-model="keyword" @search="goSearchList" @custom="goSearchList">
			</u-search>
		</view>
		<view>
			<view style="display: flex;margin-left: 30upx;margin-top: 30upx;margin-right: 30upx;"
				v-if="keywordList.length>0">
				<view>
					<text class="searchTxt" v-for="(list,index) in keywordList" :key="index"
						@click="goSearchList(list)">{{list}}</text>
				</view>
				<image @click="clearSearch" :src="$BASE_URL+'/st/mini/static/img/mine/shanchu.png'"
					style="width: 40upx;height: 40upx;margin-left: auto;" mode=""></image>
			</view>
			<view class="title search" v-if="chatRoomList.length>0&&roomType">
				<view style="display: flex;align-items: center;">
					<view class="line"></view>
					<text>推荐聊天室</text>
				</view>
				<view style="font-size: 20upx;color: #588BFF;" @click="goPath('/pages/index/index')">查看更多></view>
			</view>
			<view class="slide-box" v-if="chatRoomList.length>0&&roomType">
				<div class="slide-item"
					v-if="chat.roomType==2||chat.roomType==7||chat.roomType==26||chat.roomType==27||chat.roomType==28||chat.roomType==1008"
					v-for="(chat,index) in chatRoomList" :key="index"
					@click="goPath('/pages/subpage/chatRoomDetails/chatRoomDetails?roomId='+chat.roomId+'&channelId='+chat.channelId+'&identityId='+chat.identityId,chat.roomId)">
					<image class="img" :src="chat.managerHeadImg" mode=""></image>
					<view class="txt">
						<text class="roomName">{{chat.managerNickName}}</text>
					</view>
				</div>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				$BASE_URL: this.$BASE_URL,
				keyword: '',
				searchDefText: '',
				chatRoomList: [],
				keywordList: [],
				roomType:false
			}
		},
		onShow() {
			var that = this
			uni.getStorage({
				key: 'searchList',
				success: function(res) {
					that.keywordList = res.data
				}
			});
			this.keyword = ''
			this.appSearchInitV()
		},
		methods: {
			goPath(urls,roomId) {
				if (urls == '/pages/index/index') {
					uni.switchTab({
						url: urls
					})
				} else {
					 
					
					
					var data = {
						url: "/web/v2/api/chatRoom/inChatRoom",
						methods: "post",
						data: {
							// apiVersion: "3.8",
							roomId: roomId,
							source: '76'
						},
					};
					this.$http(data).then((res) => {
						console.log(res, "房间房间房间房间房间房间房间房间房间");
						if (res.data.code == 21135) {
							//21135 被踢出房间					
							uni.showToast({
								title: '您已被踢出房间',
								icon: "none",
								duration: 2000,
							});
						} else if (res.data.code == 25044) {
							//25044 聊天室已关闭
							uni.showToast({
								title: res.data.msg,
								icon: "none",
								duration: 2000,
							});
							return
						} else if (res.data.code == 21000) {
						
							// 判断不是女神厅 或者直播
							if (res.data.data.chatRoomInfo.roomType == 27) {
							} else if (res.data.data.chatRoomInfo.roomType == 33) {
							} else {
								uni.showToast({
									title: '暂不支持该厅',
									icon: "none",
									duration: 2000,
								});
					
								return
							}
						
							uni.navigateTo({
								url: urls,
							})
							return
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: "none",
								duration: 2000,
							});
							return
						}
					});
					
					
					
					
					
					
					
					
					
					
					uni.navigateTo({
						url: url
					})
				}
			},
			clearSearch() {
				this.keywordList = []
				uni.removeStorage({
					key: 'searchList'
				});
			},
			appSearchInitV() {
				var data = {
					url: '/web/v2/api/app/appSearchInitV',
					methods: 'post',
					data: {
						apiVersion: "1.0"
					}
				}
				this.$http(data).then(res => {
					if (res.data.code == 21000) {
						this.chatRoomList = res.data.data.roomList
						this.searchDefText = res.data.data.searchDefText
						res.data.data.roomList.map((chat,key)=>{
							if(chat.roomType==2||chat.roomType==7||chat.roomType==26||chat.roomType==27||chat.roomType==28||chat.roomType==1008){
								this.roomType=true
							}else{
								this.roomType=false
							}
						})
					} else { //接口请求失败的处理
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			isNull(str) {
				if (str == "") return true;
				var regu = "^[ ]+$";
				var re = new RegExp(regu);
				return re.test(str);
			},
			goSearchList(name) {
				this.keyword = name
				if (this.isNull(name)) {
					return
				}
				if (this.keyword != '') {
					this.keywordList.unshift(this.keyword)
					const set = new Set(this.keywordList)
					this.keywordList = [...set]
					uni.setStorage({
						key: 'searchList',
						data: this.keywordList.splice(0, 3)
					});
					uni.navigateTo({
						url: '/pages/subpage/search/searchList?keyword=' + this.keyword
					})
					this.keyword = ''
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search {
		margin: 0 30upx;
	}

	.searchTxt {
		font-size: 20upx;
		color: #333333;
		background: #EEEEEE;
		padding: 10upx;
		border-radius: 5upx;
		margin-right: 20upx;
	}

	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 32upx;
		color: #333333;
		margin-top: 30upx;
	}

	.line {
		width: 10upx;
		height: 30upx;
		background: #8F76F3;
		border-radius: 5upx;
		margin-right: 12upx;
	}

	.slide-box {
		display: -webkit-box;
		overflow-x: scroll;
		-webkit-overflow-scrolling: touch;
		margin-top: 15upx;
		margin-left: 30upx;
	}

	/* 隐藏下方的滚动条 */
	.slide-box::-webkit-scrollbar {
		background-color: transparent;
	}

	.slide-box {
		-ms-overflow-style: none;
	}

	.slide-box {
		overflow: -moz-scrollbars-none;
	}

	.slide-item {
		width: 264upx;
		height: 264upx;
		margin-right: 12upx;
		position: relative;

		.img {
			width: 100%;
			height: 100%;
			display: block;
			border-radius: 12upx;
			position: absolute;
		}

		.txt {
			width: 100%;
			height: 100%;
			position: absolute;
			font-size: 18upx;
			color: #FFFFFF;
			border-radius: 12upx;
			background: linear-gradient(top, rgba(255, 255, 255, 0) 80%, rgba(197, 197, 197, 1) 100%);

			.roomName {
				padding: 0px 11upx;
				position: absolute;
				bottom: 0px;
				height: 32upx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				width: 100%;
			}
		}
	}
</style>
